<template>
    <div>
        <f7-page class="page-reply-list ">
            <f7-navbar>
                <f7-nav-left back-link=" " sliding></f7-nav-left>
                <f7-nav-center></f7-nav-center>
            </f7-navbar>
            <div class="main comment-list">
                <ul>
                    <li @click="$f7.popover('#popReplyOperation', 'body')">
                        <div class="block">
                            <div class="hd">
                                <div class="avatar">
                                    <f7-link class="img-wrap">
                                        <img src="../../assets/images/test.jpg" alt="">
                                    </f7-link>
                                    <f7-icon fa="mars" color="blue"></f7-icon>
                                </div>
                                <div class="user-info">
                                    <f7-link class="role">这是个很长很长很长的角色名字
                                        <f7-icon fa="user-secret"></f7-icon>
                                    </f7-link>
                                    <f7-link color="red">张大大</f7-link>
                                </div>
                            </div>
                            <div class="bd">不得不承认，我们需要更多这样认真发掘传统文化的人不得不承认，我们需要更多这样认真发掘传统文化的人</div>
                            <div class="ft clearfix">
                                <span class="date">08-29 21:56</span>
                                <f7-icon fa="thumbs-o-up">3560</f7-icon>
                            </div>
                        </div>
                    </li>
                </ul>
                <div class="reply-list clearfix">
                    <ul>
                        <li>
                            <div class="block">
                                <div class="hd">
                                    <div class="avatar">
                                        <f7-link class="img-wrap">
                                            <img src="../../assets/images/test.jpg" alt="">
                                        </f7-link>
                                        <f7-icon fa="venus" color="pink"></f7-icon>
                                    </div>
                                    <div class="user-info">
                                        <f7-link color="red">林二二</f7-link> @楼主
                                        <span class="floor">1楼</span>
                                    </div>
                                </div>
                                <div class="bd">爱我中华民国！！！</div>
                                <div class="ft clearfix">
                                    <span class="date">08-29 21:56</span>
                                    <f7-icon fa="thumbs-o-up">3560</f7-icon>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="block">
                                <div class="hd">
                                    <div class="avatar">
                                        <f7-link class="img-wrap">
                                            <img src="../../assets/images/test.jpg" alt="">
                                        </f7-link>
                                        <f7-icon fa="venus" color="pink"></f7-icon>
                                    </div>
                                    <div class="user-info">
                                        <f7-link class="role">杜兰特的德兰特杜兰特的德兰特杜兰特的德兰特杜兰特的德兰特
                                            <f7-icon fa="user-secret"></f7-icon>
                                        </f7-link>
                                        <f7-link color="red">赵四强</f7-link> @1楼
                                        <span class="floor">2楼</span>
                                    </div>
                                </div>
                                <div class="bd">不得不承认，我们需要更多这样认真发掘传统文化的人不得不承认，我们需要更多这样认真发掘传统文化的人</div>
                                <div class="ft clearfix">
                                    <span class="date">08-29 21:56</span>
                                    <f7-icon fa="thumbs-o-up">3560</f7-icon>
                                </div>
                            </div>
                        </li>
                        <li>
                            <div class="block">
                                <div class="hd">
                                    <div class="avatar">
                                        <f7-link class="img-wrap">
                                            <img src="../../assets/images/test.jpg" alt="">
                                        </f7-link>
                                        <f7-icon fa="mars" color="blue"></f7-icon>
                                        <!-- <f7-icon fa="venus"></f7-icon> -->
                                    </div>
                                    <div class="user-info">
                                        <f7-link class="role">杜兰特的德兰特杜兰特的德兰特杜兰特的德兰特杜兰特的德兰特
                                            <f7-icon fa="user-secret"></f7-icon>
                                        </f7-link>
                                        <f7-link color="red">张大大</f7-link> @1楼
                                        <span class="floor">3楼</span>
                                    </div>
                                </div>
                                <div class="bd">不得不承认，我们需要更多这样认真发掘传统文化的人不得不承认，我们需要更多这样认真发掘传统文化的人</div>
                                <div class="ft clearfix">
                                    <span class="date">08-29 21:56</span>
                                    <f7-icon fa="thumbs-o-up">3560</f7-icon>
                                </div>
                            </div>
                        </li>
                    </ul>
                    <f7-link class="more">30条叨叨>></f7-link>
                </div>
            </div>
            <f7-toolbar tabbar labels class="comment-toolbar">
                <div class="edit-comment">
                    <f7-icon fa="pencil" color="red"></f7-icon>
                    <f7-input type="text" placeholder="写评论" icon-f7="chat" @click="openEditComment" readonly/>
                </div>
                <div class="icon-wrap">
                    <f7-icon fa="comment-o" class="i-with-badge" color="red">
                        <f7-badge color="red">1034</f7-badge>
                    </f7-icon>
                </div>
            </f7-toolbar>

            <f7-popover class="custom-modal" id="popReplyOperation">
                <ul>
                    <li>
                        <f7-link icon-fa="trophy" @click="goodComment">神评(
                            <span>465</span>)</f7-link>
                    </li>
                    <li>
                        <f7-link icon-fa="volume-control-phone" @click="openAccusationAction">举报</f7-link>
                    </li>
                    <li>
                        <f7-link icon-fa="files-o" @click="copy">复制</f7-link>
                    </li>
                    <li>
                        <f7-link icon-fa="pencil" @click="openEditReply">回复</f7-link>
                    </li>
                </ul>
                <f7-link class="btn-close" icon-fa="times-circle-o" close-popover></f7-link>
            </f7-popover>

            <f7-actions id="accusation" :opened="accusationActionState" @actions:closed="changeAccusationState">
                <f7-actions-group>
                    <f7-actions-label>举报问题</f7-actions-label>
                    <f7-actions-button>广告、垃圾信息</f7-actions-button>
                    <f7-actions-button>淫秽色情、语言暴力</f7-actions-button>
                    <f7-actions-button>政治敏感</f7-actions-button>
                    <f7-actions-button>假新闻、谣言</f7-actions-button>
                    <f7-actions-button>其他</f7-actions-button>
                </f7-actions-group>
                <f7-actions-group>
                    <f7-actions-button>完成</f7-actions-button>
                </f7-actions-group>
            </f7-actions>

            <f7-popup id="editReply" :opened="editReplyState" @popup:closed="changeEditReplyState">
                <f7-view navbar-fixed>
                    <f7-pages>
                        <f7-page>
                            <f7-navbar>
                                <f7-nav-left sliding>
                                    <f7-link icon-fa="close" close-popup></f7-link>
                                </f7-nav-left>
                                <f7-nav-center>回复评论</f7-nav-center>
                                <f7-nav-right>
                                    <f7-link href="/news/commentList/">发布</f7-link>
                                </f7-nav-right>
                            </f7-navbar>
                            <div class="main">
                                <div class="comment-list">
                                    <ul>
                                        <li>
                                            <div class="block">
                                                <div class="hd">
                                                    <div class="avatar">
                                                        <f7-link class="img-wrap">
                                                            <img src="../../assets/images/test.jpg" alt="">
                                                        </f7-link>
                                                        <f7-icon fa="mars" color="blue"></f7-icon>
                                                    </div>
                                                    <div class="user-info">
                                                        <f7-link class="role">这是个很长很长很长的角色名字
                                                            <f7-icon fa="user-secret"></f7-icon>
                                                        </f7-link>
                                                        <f7-link color="red">张大大</f7-link>
                                                    </div>
                                                </div>
                                                <div class="bd">不得不承认，我们需要更多这样认真发掘传统文化的人不得不承认，我们需要更多这样认真发掘传统文化的人</div>
                                                <div class="ft clearfix">
                                                    <span class="date">08-29 21:56 举报</span>
                                                    <f7-icon fa="thumbs-o-up">3560</f7-icon>
                                                </div>
                                            </div>
                                        </li>
                                    </ul>
                                </div>
                                <div class="edit-comment-common">
                                    <f7-list class="select-role" :class="{'on': toAddRole}">
                                        <f7-list-item link="javascript:;" class="guide" @click="addRole">
                                            <f7-icon fa="user-secret" class="icon-role"></f7-icon>
                                            角色扮演
                                        </f7-list-item>
                                        <f7-list-item>
                                            <f7-link icon-fa="chevron-left" class="btn-back" @click="backRole"></f7-link>
                                            <f7-link icon-fa="plus-square-o" class="btn-add" href="/news/avatar"></f7-link>
                                            <f7-input type="text" placeholder="角色名" />&ensp;说：
                                        </f7-list-item>
                                    </f7-list>
                                    <f7-list class="comment-box">
                                        <f7-list-item>
                                            <f7-input type="textarea" placeholder="请输入评论内容"></f7-input>
                                            <span class="char-limit">你还可输入150字</span>
                                        </f7-list-item>
                                    </f7-list>
                                </div>
                            </div>
                        </f7-page>
                    </f7-pages>
                </f7-view>
            </f7-popup>

            <edit-comment :editCommentState="editCommentState" @closeEditComment="closeEditComment"></edit-comment>
        </f7-page>
    </div>
</template>

<style lang="scss">
    @import "../../assets/css/common.scss";
    .navbar {
        .comment-list-icon {
            margin-right: 30px;
        }
    }

    .page-reply-list {
        .tabbar {
            .icon-wrap {
                -webkit-box-flex: 0.5;
                flex: 0.5;
                text-align: left;

                i {
                    display: inline-block;
                    margin-left: 10px;
                }
            }
        }
    }

    #popReplyOperation {
        padding: 30px 0 15px;
        text-align: center;

        ul {
            display: flex;
            padding: 0;
        }

        li {
            -webkit-flex: 1;
            flex: 1;
            text-align: center;
            margin: 0 10px;
        }

        .icon {
            display: block;
        }

        a {
            font-size: 12px;
            color: #333;

            span {
                color: #f00;
            }
        }

        .btn-close {
            text-align: center;

            .icon {
                display: inline-block;
            }
        }
    }
</style>

<script>
    import editComment from './editComment.vue'
    export default {
        data() {
            return {
                accusationActionState: false, // 举报action状态判断
                editReplyState: false, // 回复编辑popup状态判断
                toAddRole: false, // 角色扮演点击切换状态判断
                editCommentState: false
            };
        },
        components: {
            editComment
        },
        methods: {
            /* 打开举报action */
            openAccusationAction() {
                this.$f7.closeModal("#popReplyOperation")
                this.accusationActionState = true
            },
            /* 改变举报action的打开状态 */
            changeAccusationState() {
                this.accusationActionState = false
            },
            /* 点击神评 */
            goodComment() {
                this.$f7.closeModal("#popReplyOperation")
                this.$f7.alert(
                    "神评+1",
                    "<i class='icon fa fa-check-circle-o' style='font-size: 35px;'></i>"
                )
            },
            /* 点击复制 */
            copy() {
                this.$f7.closeModal("#popReplyOperation")
                this.$f7.alert(
                    "复制成功",
                    "<i class='icon fa fa-check-circle-o' style='font-size: 35px;'></i>"
                )
            },
            /* 角色扮演 */
            addRole() {
                this.toAddRole = true
            },
            /* 返回角色扮演 */
            backRole() {
                this.toAddRole = false
            },
            /* 打开回复评论popup */
            openEditReply() {
                this.$f7.closeModal("#popReplyOperation")
                this.editReplyState = true
            },
            /* 改变回复评论popup的打开状态 */
            changeEditReplyState() {
                this.editReplyState = false
            },
            openEditComment() {
                this.editCommentState = true
            },
            closeEditComment() {
                this.editCommentState = false
            }
        }
    };
</script>